import { forwardRef, useEffect, useRef } from "react";
import "./App.css";


const Guang = (props, ref) => {
    return (
        <div>
            {/* 把input传递给父组件的ref变量 */}
            <input ref={ref} />
        </div>
    )
}

// forwardRef的作用是向父组件传递公开DOM节点，react19之后，ref的值可以作为props使用，forwardRef日后将会被弃用
const WrapedGang = forwardRef(Guang)

function App() {
    const ref = useRef(null)

    useEffect(() => {
        ref.current.focus()
        console.log(ref, 'ref');
    }, [])
    return (
        <>
        <div className="card">
            <WrapedGang ref={ref}></WrapedGang>
        </div>
        </>
    );
}

export default App;
